<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>加入购物车效果</title>
		<style>
			.ball{
				width: 15px;
				height: 15px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		
		<div id="app2">
			<input type="button" value="加入购物车" @click="flag2=!flag2"/>
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
				<div class="ball" v-show="flag2"></div>
			</transition>
		</div>
		
		<script type="text/javascript">
			var vm2 = new Vue({
				el: "#app2",
				data:{
					flag2: false
				},
				methods:{
					beforeEnter: (el) => {
						el.style.transform = 'translate(0,0)';
					},
					enter: (el, done) => {
						el.offsetWidth;
						el.style.transform = 'translate(150px, 450px)';
						el.style.transition = 'all 1s ease'
						done();
					},
					afterEnter(el){
						// 不需要后半场动画，直接跳过，并且让小球隐藏
						// true -> false
						this.flag2 = !this.flag2;
						// VUE把一个完整的动画，使用钩子函数，拆分成了两部分
						// 使用flag标识符表示动画的切换
						// 开始：flag= false  => true -> false
					}
				}
			})
		</script>
	</body>
</html>
